<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--路线新增页面-->
    <title>公交管理系统</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        body{
            padding: 20px;
        }
    </style>
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">路线名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" required  lay-verify="required" placeholder="请输入路线名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开始站点</label>
        <div class="layui-input-block">
            <input type="text" name="startingPoint" required  lay-verify="required" placeholder="请输入开始站点" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">结束站点</label>
        <div class="layui-input-block">
            <input type="text" name="end" required  lay-verify="required" placeholder="请输入结束站点" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">中间站点</label>
        <div class="layui-input-block">
            <div id="demo1"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="btn-submit" class="layui-btn" lay-submit lay-filter="btn-submit-filter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="https://maplemei.gitee.io/xm-select/xm-select.js" th:src="@{https://maplemei.gitee.io/xm-select/xm-select.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:inline="javascript">
        layui.use(['laydate','table','form','layer','jquery'], function(){
            var laydate = layui.laydate;
            var table = layui.table;
            var layer=layui.layer;
            var form = layui.form;
            var $ = layui.$;

            //如果需要使用原始保单提交方式(刷新整个页面)
            //请注释掉下方 监听表单的 代码
            // form.on('submit(demo1)', function(data) {
            //     //打印表单数据
            //     alert(JSON.stringify(data.field))
            //     layer.alert("提交成功;如果需要使用原始保单提交方式,请注释掉本段代码", {
            //         title: '提示'
            //     });
            //     //ajax操作等
            //     // some code
            //     return false;//阻止默认表单提交行为
            // });

            var options = {
                el: '#demo1',
                name: 'xmselectName',//表单的name属性
                layVerify: 'required',//必填项
                //layVerType: 'tips',//提示类型 同layui
                tips: '选择站点',
                toolbar: {//工具条,全选,清空,反选
                    show: true,
                    list: [
                        'ALL',
                        'CLEAR',
                        'REVERSE',
                    ]
                },
                data: [],
                initValue: ['',''],//默认初始化,也可以数据中selected属性
                // language: 'zn',//语言包
                filterable: true,//搜索功能
                autoRow: true,//选项过多,自动换行
                repeat: false,//是否支持重复选择
                max: 5,//最多选择5个
                template({ item, sels, name, value }){
                   //template:自定义下拉框的模板
                    return item.name
                },
            };
            var demo1 = xmSelect.render(options)
                setTimeout(function(){
                    /*获取站点信息*/
                    $.ajax({
                        type:"get",
                        url:"/site/getSiteListAdd",
                        dataType:"json",
                        success : function (data) {
                            if (data.code === "200") {
                                var data=data.data
                                demo1.update({data: data})
                            }
                        }
                    })
                // //假设data是ajax 异步获取的
                // var data =[
                // //selected属性可以初始化下拉框
                // //{name: '水果', value:'shuiguo',selected:true, disabled: true},
                //     {name: '水果', value:'shuiguo'},
                //     {name: '蔬菜', value: 'shucai'},
                //     {name: '桌子', value: 'zhuozi'},
                //     {name: '北京', value: 'beijing'},
                // ];
                //模拟通过ajax 获取json数据,异步更新多选下拉框的值
                // demo1.update({data: data})
            },100);


            /*验证路线名是否可用*/
            $("#name").blur(function(){
                var name=$("#name").val()
                $.ajax({
                    type:"get",
                    url:"/route/judgeAvailable",
                    data:{name:name},
                    dataType:"json",
                    success : function (data) {
                        console.log(data)
                        if (data.code!=='200') {
                            layer.msg(data.message,{icon:0,time:1500});
                        }
                    }
                })
            })

            laydate.render({
                elem: '[name="birthday"]' //指定元素
            });

            // 表单提交
            form.on('submit(btn-submit-filter)', function(data){
                $("#btn-submit").attr("disabled","disabled").addClass("layui-btn-disabled");
                // 异步请求提交数据
                if (data.field.end===data.field.startingPoint) {
                    layer.msg("起点和终点不能一致",{icon:0,time:1500});
                }else {
                    var url = "/route/addRoute";
                    $.post(url,data.field,function (response) {
                        if(response.code === '200'){
                            // 成功提示
                            layer.msg(response.message, {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                // 刷新表格
                                parent.refreshTable();
                                // 关闭窗口
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            });
                        }else{
                            $("#btn-submit").removeAttr("disabled","disabled").removeClass("layui-btn-disabled");
                            // 失败则提示错误信息，窗口不关闭
                            layer.msg("新增失败，请联系管理员", {
                                icon: 2,
                                anim: 6
                            });
                        }
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                }

            });
        });
    </script>
</body>
</html>
